<template>
  <div class="app-page">
    <div class="proDetail" v-if="isTest">
      <div class="proImg">
        <span class="tag">免费众测</span>
        <img src="../../../assets/image/publicTest/zcdetail-banner.jpg" />
      </div>
      <div class="imgInfo">
        <h2>夏季车享家定制博世新风翼雨刷（1对）</h2>
        <p class="des"><span>U型接口无骨雨刷安装简单，</span><span>稳固一体式导流设计减少风噪</span></p>
        <div class="settingBlock">
          <ctime :endTime="endTime" class="ctime"></ctime>
          <p class="surplus">剩余<i>900</i>份</p>
        </div>
        <div class="prosetting">
          <p class="price">众测价格：<i class="num">80元</i>  <s class="oldprice">&yen;398</s></p>
          <p class="applyed"><i class="num">200</i>人已申请</p>
        </div>               
      </div>
      <div class="infoDetail">       
        <div class="announce"><img src="../../../assets/image/publicTest/freeTestProcess.jpg" /></div>
        <div class="member" v-if="selected">
          <h2>众测达人名单</h2>
          <ul class="lists hid">
            <li>
              <h3><img src="../../../assets/image/publicTest/pic01.png" /></h3>
              <p>李么么</p>
            </li>
            <li>
              <h3><img src="../../../assets/image/publicTest/img01.png" /></h3>
              <p>李么么</p>
            </li>
            <li>
              <h3><img src="../../../assets/image/publicTest/icon01.png" /></h3>
              <p>李么么</p>
            </li>
            <li>
              <h3></h3>
              <p>李么么</p>
            </li>
            <li>
              <h3></h3>
              <p>李么么</p>
            </li>
            <li>
              <h3></h3>
              <p>李么么</p>
            </li>
            <li>
              <h3></h3>
              <p>李么么</p>
            </li>
            <li>
              <h3></h3>
              <p>李么么</p>
            </li>
            <li>
              <h3></h3>
              <p>李么么</p>
            </li>
            <li>
              <h3></h3>
              <p>李么么</p>
            </li>
            <li>
              <h3></h3>
              <p>李么么</p>
            </li>
            <li>
              <h3></h3>
              <p>李么么</p>
            </li>
            <li>
              <h3></h3>
              <p>李么么</p>
            </li>
            <li>
              <h3></h3>
              <p>李么么</p>
            </li>
            <li>
              <h3></h3>
              <p>李么么</p>
            </li>            
          </ul>
          <a href="javascript:;" @click="showMore" class="more">查看更多<i>》</i></a>
        </div>
        <div class="proDetailCont">
           <h2>产品介绍</h2>
           <div class="content">fdsafdsafdsaf</div>
        </div>
        <div class="fixBtn" v-if="isApp&&flag==3"><a class="btn" :href="cpUrl">立即申请</a></div>
      </div>
    </div>
    <div class="proDetail" v-else>
      <div class="proImg">
        <span class="tag" v-if="zcDetail.type=='f'">免费众测</span>
        <span class="tag" v-if="zcDetail.type=='s'">特价众测</span>
        <img :src="zcDetail.picture" />
      </div>
      <div class="imgInfo">
        <h2>{{ zcDetail.title }}</h2>
        <p class="des"><span v-for="(item,index) in zcDetail.subtitle">{{ item }}</span></p>
        <div class="settingBlock">
          <ctime :endTime="endTime" class="ctime"></ctime>
          <p class="surplus">剩余<i>{{ zcDetail.countAvailable }}</i>份</p>
        </div>
        <div class="prosetting">
          <p class="price">众测价格：<i class="num">{{ zcDetail.salePrice }}元</i>  <s class="oldprice">¥{{ zcDetail.price }}</s></p>
          <p class="applyed" v-if="zcDetail.type=='s'"><i class="num">{{ zcDetail.numberOfParticipants }}</i>人已参与测评</p>
          <p class="applyed" v-if="zcDetail.type=='f'"><i class="num">{{ zcDetail.numberOfParticipants }}</i>人已申请</p>
        </div>               
      </div>
      <div class="infoDetail">       
        <div class="announce"><img v-if="zcDetail.type=='s'" src="" /><img v-if="zcDetail.type=='f'" src="../../../assets/image/publicTest/freeTestProcess.jpg" /></div>
        <div class="member" v-if="selected">
          <h2>众测达人名单</h2>
          <ul class="lists hid">
            <li v-for="item in memberArr">
              <h3><img :src="item.icon" /></h3>
              <p>{{ item.name }}</p>
            </li>          
          </ul>
          <a href="javascript:;" @click="showMore" v-if="memberArr.length>12" class="more">查看更多<i>》</i></a>
        </div>
        <div class="proDetailCont">
           <h2>产品介绍</h2>
           <div class="content" v-html="zcDetail.detail"></div>
        </div>
        <div class="fixBtn"><a class="btn" :href="btnUrl">{{btnText}}</a></div>
        <!--<div class="fixBtn" v-if="isApp&&flag==2"><a class="btn" href="javascript:;">申请已结束，众测体验中</a></div>
        <div class="fixBtn" v-if="isApp&&flag==3"><a class="btn" :href="cpUrl">查看优秀测评</a></div>
        <div class="fixBtn" v-if="!isApp"><a class="btn" :href="appUrl">下载App</a></div>-->
        
      </div>
    </div>
  </div>
  
</template>

<style lang="scss" scope>
@import '../../../assets/css/common.scss';

body{background:#edf0f5;padding-bottom:rem(50);margin:0 auto}
img{max-width:100%}
$c1:#1f2730;
$c2:#0a1825;
$c3:#ff3b3b;
.app-page{
  .proDetail{
    .proImg{position:relative;
      .tag{position:absolute;background:#108ee9;left:0;top:rem(11);z-index:1;padding:rem(5) rem(10);border-radius:rem(3);color:$_fff;}
    }
    .imgInfo{padding:rem(20) rem(20) 0;background:$_fff;border-bottom:1px solid #dddedf;
      h2{font-size:rem(19);color:$c2;font-weight:bold;margin-bottom:rem(10)}
      .des{font-size:rem(11);color:$c2;}
      .settingBlock{display:flex;justify-content:space-between;padding:rem(16) 0 rem(15);border-bottom:1px solid #f1f1f1;
        .ctime{}
        .surplus{font-size:rem(13);color:$c1;
          i{margin:0 rem(2);font-weight:bold;}
        }
      }
      .prosetting{padding:rem(15) 0;display:flex;justify-content:space-between;
        .price{font-size:rem(16);color:$c1;
          @at-root .num{font-size:rem(18);color:$c3;margin:0 rem(3);}
          .oldprice{font-size:rem(13);color:#afafaf;}
        }
      }
    }
    .infoDetail{margin-top:rem(8);
      .member{padding:rem(15);background:$_fff;border-bottom:1px solid #dddedf;
        h2{font-size:rem(13);color:$c1;margin-bottom:rem(15);}
        .lists{
          li{width:15.5%;display:inline-block;margin-bottom:rem(10);text-align:center;
            h3{width:rem(44);height:rem(44);border-radius:50%;background:#d7dbe2;margin:0 auto rem(3);
              img{width:rem(44);height:rem(44);border-radius:50%;}
            }
            p{color:$c1;}
          }        
        }
        .hid{height:rem(135);overflow:hidden;}
        .more{text-align:center;display:block;color:#108ee9;font-size:rem(12);
          i{transform: rotate(90deg);display: inline-block;position: relative;top:rem(3);margin-left:rem(2);}
        }
      }
      .proDetailCont{margin-top:rem(8);padding:rem(15) rem(9);background:$_fff;
        h2{padding:0 0 rem(17.5) rem(10);font-size:rem(13)}
        .content{}
      }
    }
  }
  .fixBtn{width:100%;max-width:640px;position:fixed;bottom:0;z-index:4;height:rem(50);background:rgba(0,0,0,.8);text-align:right;
    .btn{background:#FC0D1B;color:$_fff;padding:rem(5) rem(10);position:absolute;right:rem(20);top:rem(10);z-index:5;font-size:rem(16)}
  }
}
</style>

<script>
import common from "../../../assets/js/common.js";
import {Toast} from 'mint-ui';
import ctime from '../../common/countTime';
export default {
  data (){
    return {
      shareObj:{},
      zcDetail:{},
      endTime:"2017-06-25 24:00:00",
      initSignUrl:process.env.NODE_ENV == 'sit' ? common.isEnv("//recruit") : common.isEnv("//wx"),
      appUrl: '//cxb.chexiang.com/service/version/getLatestAppVersion/0?channel=cx_cxj_xzy_0628_zc',
      proDetailUrl:common.isdev() + '/zhongce/item.htm',//商品接口
      btnUrl:'javascript:;',
      btnText:'',
      cpUrl:'../commentList/commentList.html',//测评广场
      loginUrl:common.isdev() + '/bwcactive/checkLogin.htm',
      selected:false,
      memberUrl:common.isdev() + '/zhongce/participants.htm?sid=' + common.getQueryString("sid"),
      memberArr:[],
      isLogin:false,
      isApp:common.isApp(),
      isTest:false
    }
  },
  components: {ctime},
  watch:{
 
  },
  created(){
    var e = this;
    //商品详情
    if(common.getQueryString('sid')){
      e.proDetailUrl +="?sid=" + common.getQueryString('sid');
    }

    e.$http.get(e.proDetailUrl).then((d)=>{
      var code = d.body.errorCode;
      if(code == '1' ){
        e.zcDetail = d.body.obj;
        var info = e.zcDetail;
        if(!e.isApp) {
          e.btnText = "下载Appp";
          e.btnUrl = e.appUrl;
        }else{
          if(info.type == 'f'){
            switch (e.zcDetail.status){
              case 22:
                    e.btnText="申请已结束，测评中...";
                    break;
              case 23:
                    e.btnText="查看测评报告";
                    e.btnUrl = "../commentList/commentList." + common.isHtml() + "?sid=" + common.getQueryString('sid');
                    break;
              other :
                    e.btnText="立即申请";
                    e.btnUrl = "../freeTestSubmit/freeTestSubmit.html";
            }
            
          }else{
            //跳转商品购买页需带参
            var userinfo = userinfo !=undefined ? "userinfo=" + userinfo : "";
            switch (e.zcDetail.status){
              case 10:
                    e.btnText="立即领取";
                    e.btnUrl = e.zcDetail.targetURL + userinfo;
                    break;
              other :
                    e.btnText="查看测评报告";
                    e.btnUrl = "../commentList/commentList." + common.isHtml() + "?sid=" + common.getQueryString('sid');
            }
          }
        }
        
      }else{
        Toast(d.body.msg);
      }
    },(err)=>{
      Toast("网络异常");
    });

    //成功入选名单
    e.$http.get(e.memberUrl +"&t="+Date.now() ).then((d)=>{
      var msg = d.body.msg, errorCode = d.body.errorCode;
      if(errorCode != "1"){
        Toast(msg);
      }else{
        e.memberArr = d.body.obj;
        if(e.memberArr.length>0)  e.selected = true;
      }

    },(err)=>{
      Toast("网络异常");
    });    
  },
  mounted(){
    var e = this;
    //分享数据配置
    e.shareObj = {
      friend: {
        title: ",车享家请你来评测啦！",
        desc: "还在等什么？名额有限喔～",
        link: window.location.protocol + "//" + window.location.host + '?utm_source=share',
        imgUrl: ""
      },
      friendQuan: {
        title: ",车享家请你来评测啦！",
        link: window.location.protocol + "//" + window.location.host + '?utm_source=share',
        imgUrl: ""
      }
    };
    if(!common.isApp()){        
      common.initWxShare(e, e.initSignUrl, e.shareObj, 2);
    }
    common.ANA_AnalyticsScan();
  },
  methods:{
    //分享
    share(){
      var e = this;
      console.log("share");       
      lb.shareInfo({
        title : e.shareObj.friend.desc,
        url : e.shareObj.friend.lineLink,
        content : e.shareObj.friend.shareTitle,
        imgUrl : e.shareObj.friend.imgUrl
      } ,function (data) {
        if(data.errorCode == 0){
          common.shareSucess(e, 2);
        }else{
          Toast("分享失败");
        }
      })
    },
    //判断登录
    checkLogin( fn ){
      var e = this;
      e.$http.get(e.isLoginUrl).then((d)=>{
        var result = d.body.result, loginUrl = d.body.msg;
        if(result == '0' ){
          window.location.href = loginUrl;
        }else{
          e.isLogin = true;
          console.log("isLogin:", e.isLogin)
          fn();
        }
      },(err)=>{
        Toast("网络异常");
      });
    },
    //显示更多达人名单
    showMore(){
      $(".lists").removeClass("hid");
      $(".member .more").hide();
    }

  }
}


</script>